<div style="transform: scale(0.9);margin: -50px 0 0 -60px;">
    <!-- 总量统计 -->
    <div class="total-count">
        <div class="total-item">
            <div>
                <p>总销售金额</p>
                <p>￥{{ $totalSalePrice ?? 0 }}</p>
            </div>
            <img src="/imgs/dashboard/icon-1.png"/>
        </div>
        <div class="total-item">
            <div>
                <p>总销售数量</p>
                <p>{{ $totalSaleCount ?? 0 }}</p>
            </div>
            <img src="/imgs/dashboard/icon-2.png"/>
        </div>
        <div class="total-item">
            <div>
                <p>总订单数量</p>
                <p>{{ $totalOrderCount ?? 0 }}</p>
            </div>
            <img src="/imgs/dashboard/icon-3.png"/>
        </div>
        <div class="total-item">
            <div>
                <p>总用户数量</p>
                <p>{{ $totalCount ?? 0 }}</p>
            </div>
            <img src="/imgs/dashboard/icon-4.png"/>
        </div>
    </div>
    <!-- 今日统计 -->
    <div class="current-count-wrap">
        <h4 class="current-title">今日数据总览</h4>
        <div class="current-count">
            <div class="current-item">
                <p>销售金额</p>
                <p>￥{{ $daySalePrice ?? 0 }}</p>
                <span class="item-tag">今日数据</span>
            </div>
            <div class="current-item">
                <p>销售数量</p>
                <p>{{ $daySaleCount ?? 0 }}</p>
                <span class="item-tag">今日数据</span>
            </div>
            <div class="current-item">
                <p>订单数量</p>
                <p>{{ $dayOrderCount ?? 0 }}</p>
                <span class="item-tag">今日数据</span>
            </div>
            <div class="current-item">
                <p>用户数量
                    @if($dayCount > $lastDayCount)
                    <span>+{{ $dayCount - $lastDayCount }}</span>
                    @endif
                </p>
                <p>{{ $dayCount ?? 0 }}</p>
                <span class="item-tag">今日数据</span>
            </div>
        </div>
    </div>
    <!-- 本月统计 -->
    <div class="current-count-wrap">
        <h4 class="current-title">本月数据总览</h4>
        <div class="current-count">
            <div class="current-item">
                <p>销售金额</p>
                <p>￥{{ $monthSalePrice ?? 0 }}</p>
                <span class="item-tag">本月数据</span>
            </div>
            <div class="current-item">
                <p>销售数量</p>
                <p>{{ $monthSaleCount ?? 0 }}</p>
                <span class="item-tag">本月数据</span>
            </div>
            <div class="current-item">
                <p>订单数量</p>
                <p>{{ $monthOrderCount ?? 0 }}</p>
                <span class="item-tag">本月数据</span>
            </div>
            <div class="current-item">
                <p>用户数量
                    @if($monthCount > $lastMonthCount)
                        <span>+{{ $monthCount - $lastMonthCount }}</span>
                    @endif
                </p>
                <p>{{ $monthCount ?? 0 }}</p>
                <span class="item-tag">本月数据</span>
            </div>
        </div>
    </div>
    <!-- 本年统计 -->
    <div class="current-count-wrap">
        <h4 class="current-title">本年数据总览</h4>
        <div class="current-count">
            <div class="current-item">
                <p>销售金额</p>
                <p>￥{{ $yearSalePrice ?? 0 }}</p>
                <span class="item-tag">本年数据</span>
            </div>
            <div class="current-item">
                <p>销售数量</p>
                <p>{{ $yearSaleCount ?? 0 }}</p>
                <span class="item-tag">本年数据</span>
            </div>
            <div class="current-item">
                <p>订单数量</p>
                <p>{{ $yearOrderCount ?? 0 }}</p>
                <span class="item-tag">本年数据</span>
            </div>
            <div class="current-item">
                <p>用户数量
                    @if($yearCount > $lastYearCount)
                        <span>+{{ $yearCount - $lastYearCount }}</span>
                    @endif
                </p>
                <p>{{ $yearCount ?? 0 }}</p>
                <span class="item-tag">本年数据</span>
            </div>
        </div>
    </div>
</div>


<style scoped>
    .total-count {
        display: flex;
    }

    .total-count .total-item {
        background-color: #fff;
        border-radius: 10px;
        box-sizing: border-box;
        width: 355px;
        height: 154px;
        padding: 0 26px 0 42px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
    }

    .total-count .total-item:not(:nth-child(1)) {
        margin-left: 25px;
    }

    .total-count .total-item p {
        font-size: 22px;
        text-align: center;
    }

    .total-count .total-item p:nth-child(1) {
        color: #333;
    }

    .total-count .total-item p:nth-child(2) {
        color: #000;
        font-weight: bold;
        margin-top: 30px;
    }

    .total-count .total-item img {
        width: 97px;
    }

    .current-count-wrap .current-title {
        padding-left: 8px;
        line-height: 56px;
        font-size: 22px;
        margin: 0;
    }

    .current-count-wrap .current-count {
        background-color: #fff;
        width: 1500px;
        height: 185px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }

    .current-count-wrap .current-count .current-item {
        width: 324px;
        height: 144px;
        border-radius: 10px;
        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .current-count-wrap .current-count .current-item::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        width: 255px;
        height: 1px;
        background-color: #D3D3D3
    }

    .current-count-wrap .current-count .current-item:not(:nth-child(1)) {
        margin-left: 30px;
    }

    .current-count-wrap .current-count .current-item p {
        text-align: center;
        margin: 0;
        font-size: 22px;
    }

    .current-count-wrap .current-count .current-item p:nth-child(1) {
        position: relative;
    }

    .current-count-wrap .current-count .current-item p:nth-child(1) span {
        position: absolute;
        top: 0px;
        right: -80px;
        color: #F41E23;
        font-size: 20px;
        width: 70px;
        text-align: left;
    }

    .current-count-wrap .current-count .current-item p:nth-child(2) {
        font-weight: bold;
        margin-top: 50px
    }

    .current-count-wrap .current-count .current-item .item-tag {
        display: block;
        width: 98px;
        line-height: 37px;
        text-align: center;
        border-radius: 10px 10px 10px 0;
        font-size: 18px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .current-count-wrap .current-count .current-item:nth-child(1) .item-tag {
        color: #1FCFA1;
        background-color: #d2f5ec;
    }

    .current-count-wrap .current-count .current-item:nth-child(2) .item-tag {
        color: #F41E23;
        background-color: #FEE1E4;
    }

    .current-count-wrap .current-count .current-item:nth-child(3) .item-tag {
        color: #1FA0EB;
        background-color: #D3F6FF;
    }

    .current-count-wrap .current-count .current-item:nth-child(4) .item-tag {
        color: #F57048;
        background-color: #fffaf4;
    }
</style>
